<template>
    <div>
        <Card shadow>
            <div class="search-con search-con-top">
                <ButtonGroup>
                    <Button   class="search-btn" type="primary" @click="addStore()">
                        <span>添加仓库</span>
                    </Button>
                </ButtonGroup>
            </div>
            <Table :columns="columns" :data="data" :loading="loading">
              <template slot="storetype" slot-scope="{ row }">
                <Badge v-if="row.storetype===1" status="success" text="本地"/>
                <Badge v-else-if="row.storetype===2" status="warning" text="fastdfs"/>
                <Badge v-else-if="row.storetype===3" status="success" text="千牛"/>
                <Badge v-else-if="row.storetype===4" status="success" text="腾讯"/>
                <Badge v-else-if="row.storetype===5" status="success" text="阿里云"/>
                <Badge v-else="" status="warning" text="未知"/>
              </template>
              <template slot="iscloud" slot-scope="{ row }">
                <Badge v-if="row.iscloud===1" status="success" text="云"/>
                <Badge v-else-if="row.iscloud===0" status="warning" text="本地"/>
                <Badge v-else="" status="warning" text="未知"/>
              </template>
              <template slot="isdefault" slot-scope="{ row }">
                <Badge v-if="row.isdefault===1" status="warning" text="否"/>
                <Badge v-else-if="row.isdefault===0" status="success" text="是"/>
                <Badge v-else="" status="warning" text="未知"/>
              </template>
                <template slot="action" slot-scope="{ row }">
                    <a   @click="handleModal(row)">编辑</a>&nbsp;
                    <Dropdown v-show="hasAuthority('SetEdit')" transfer ref="dropdown" @on-click="handleClick($event,row)">
                        <a href="javascript:void(0)">
                            <span>更多</span>
                            <Icon type="ios-arrow-down"></Icon>
                        </a>
                        <DropdownMenu slot="list">
                            <DropdownItem  name="remove">删除</DropdownItem>
                        </DropdownMenu>
                    </Dropdown>&nbsp;
                </template>
            </Table>
            <Page :total="pageInfo.total" :current="pageInfo.page" :page-size="pageInfo.limit" show-elevator show-sizer
                  show-total
                  @on-change="handlePage" @on-page-size-change='handlePageSize'></Page>
        </Card>
        <Modal v-model="modalVisible"   :title="modalTitle" width="40"   @on-cancel="handleReset">
            <div>
                <Form ref="form" :model="formItem" :rules="formItemRules" :label-width="100">
                    <FormItem label="仓库名称" prop="storeName">
                        <Input v-model="formItem.storeName"  placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="仓库英文名称" prop="storeEnName">
                        <Input v-model="formItem.storeEnName"  placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="密钥ID" prop="accessKey">
                        <Input v-model="formItem.accessKey"  placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="账号ID" prop="appid">
                        <Input v-model="formItem.appid"  placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="桶名" prop="bucketName">
                        <Input v-model="formItem.bucketName"  placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="域名" prop="domain">
                        <Input v-model="formItem.domain"  placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="仓库类型" prop="storetype">
                        <Input v-model="formItem.storetype"  placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="是否云存储： 1 云 0本地" prop="iscloud">
                        <Input v-model="formItem.iscloud"  placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="通用配置内容" prop="commcontent">
                        <Input v-model="formItem.commcontent"  placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="当前容量" prop="nowsize">
                        <Input v-model="formItem.nowsize"  placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="最大容量" prop="maxsize">
                        <Input v-model="formItem.maxsize"  placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="" prop="endpoint">
                        <Input v-model="formItem.endpoint"  placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="是否默认（仅针对本地）： 1 否 0是" prop="isdefault">
                        <Input v-model="formItem.isdefault"  placeholder="请输入内容"></Input>
                    </FormItem>
                </Form>
                <div class="drawer-footer">
                    <Button type="default" @click="handleReset">取消</Button>&nbsp;
                    <Button type="primary" @click="handleSubmit" :loading="saving">保存</Button>
                </div>
            </div>
        </Modal>
      <Modal v-model="uploadVisible"   :title="uploadTitle" width="40"   @on-cancel="handleReset">
        <Card >
          <p slot="title">
            <Icon type="logo-android" />
            {{formItem.storeName}}
          </p>
          <a href="#" slot="extra" >
            <Icon type="ios-loop-strong"></Icon>
            <Button type="primary" icon="ios-search" style="margin-right: 5px">测试连通</Button>
            <Button icon="ios-search">测试下载文件</Button>
          </a>
          <ul>
            <li>
              <Tooltip  placement="top"   style="margin-right: 5px">
                <Button>英文名：</Button>
                <div slot="content">
                  <p>仓库名称和英文名称由管理员自定义</p>
                  <p><i>但英文命名在平台中需保持唯一</i></p>
                </div>
            </Tooltip >
              <label >{{formItem.storeEnName}}</label></li>
            <li v-show="formItem.iscloud==1">
              <Tooltip  placement="top"   style="margin-right: 5px">
                <Button>桶名：</Button>
                <div slot="content">
                  <p>对象存储中的存储空间名称</p>
                  <p><i>本地存储无此概念</i></p>
                </div>
              </Tooltip >
              <label >{{formItem.bucketName}}</label></li>
            <li v-show="formItem.iscloud==1">
              <Tooltip  placement="top"   style="margin-right: 5px">
                <Button>当前容量：</Button>
                <div slot="content">
                  <p>当前存储使用容量</p>
                  <p>根据收费规则容量需细化到MB</p>
                  <p><i>本地磁盘自行检查（系统不做硬件读取）</i></p>
                </div>
              </Tooltip >
              <label  >{{formItem.nowsize}}MB</label></li>
            <li>
              <Tooltip  placement="top"   style="margin-right: 5px">
                <Button>最大容量：</Button>
                <div slot="content">
                  <p>当前存储的最大容量（手工配置）</p>
                  <p><i>本地存储中的最大容量为磁盘可用容量</i></p>
                  <p><i>对象存储中最大容量为付费容量</i></p>
                </div>
              </Tooltip >
              <label  >{{formItem.maxsize}}MB</label></li>
            <li v-show="formItem.iscloud==0">
              <Tooltip  placement="top"   style="margin-right: 5px">
                <Button>存储位置：</Button>
                <div slot="content">
                  <p>文件默认存储位置(本地磁盘路径）</p>
                  <p><i>对象存储无此概念</i></p>
                </div>
              </Tooltip >
              <label  >{{formItem.commcontent}}</label>
            </li>
          </ul>
        </Card>
        <slot>
        <Upload  multiple type="drag"  name="upfile"  max-size="100000"  action="http://localhost:8888/file/file/uploaddefault">
          <i-button type="info" class="btn btn-file" icon="ios-cloud-upload-outline"
                    style="width:100%;">选择附件
          </i-button>
        </Upload>
        </slot>
        <div slot="footer"></div>
      </Modal>
    </div>
</template>

<script>
    import Set from '@/api/fileserver/Set'

    export default {
        name: 'Set',
        data () {
            return {
                // upfile:"",
                loading: false,
                saving: false,
                modalVisible: false,
                uploadVisible: false,
                modalTitle: '',
                uploadTitle: '',
                uploadUri:this.$config.apiUrl.dev+"/file/files-upload",
                pageInfo: {
                    total: 0,
                    page: 1,
                    limit: 10
                },
                formItemRules: {
                    storeName: [
                        {required: true, message: '仓库名称不能为空', trigger: 'blur'}
                    ],
                    storeEnName: [
                        {required: true, message: '仓库英文名称不能为空', trigger: 'blur'}
                    ],
                },
                formItem: {
                    id: '',
                    storeName: '',
                    appid: '',
                    bucketName: '',
                    domain: '',
                    storetype: '',
                    iscloud: '',
                    commcontent: '',
                    nowsize: '',
                    maxsize: '',
                    endpoint: '',
                    isdefault: '',
                },
                columns: [
                    {
                        title: '仓库名称',
                        key: 'storeName',
                        width: 200,
                        fixed: 'left',
                        render: (h, params) => {
                          return h('div', [
                            h('Icon', {
                              props: {
                                type: 'storeName'
                              }
                            }),
                            h('strong', params.row.storeName)
                          ]);
                        }
                    },
                    {
                      title: '仓库类型 ',
                      key: 'storetype',
                      slot: 'storetype',
                      width: 100
                    },
                    {
                        title: '仓库英文名',
                        key: 'storeEnName',
                        width: 100
                    },
                    {
                        title: '桶名',
                        key: 'bucketName',
                        width: 200
                    },
                    {
                        title: '是否云存储',
                        key: 'iscloud',
                        slot: 'iscloud',
                        width: 100
                    },
                    {
                        title: '本地路径配置',
                        key: 'commcontent',
                        width: 280
                    },
                    {
                        title: '当前容量',
                        key: 'nowsize',
                        width: 150,
                      render: (h, params) => {
                        return h('div', [
                          h('Icon', {
                            props: {
                              type: 'storeName'
                            }
                          }),
                          h('strong', params.row.nowsize+"(MB)")
                        ]);
                      }
                    },
                    {
                        title: '最大容量',
                        key: 'maxsize',
                        width: 150,
                          render: (h, params) => {
                            return h('div', [
                              h('Icon', {
                                props: {
                                  type: 'storeName'
                                }
                              }),
                              h('strong', params.row.maxsize+"(MB)")
                            ]);
                          }
                    },
                    {
                        title: '是否默认',
                        key: 'isdefault',
                        slot: 'isdefault',
                        width: 150
                    },
                    {
                      title: '操作',
                      key: 'action',
                      width: 220,
                      align: 'center',
                      fixed: 'right' ,
                      render: (h, params) => {
                        return h('div', [
                          h('Button', {
                            props: {
                              type: 'primary',
                              size: 'small'
                            },
                            style: {
                              marginRight: '5px'
                            },
                            on: {
                              click: () => {
                                this.handleModal(params.index,0)
                              }
                            }
                          }, '编辑'),
                          h('Button', {
                            props: {
                              type: 'error',
                              size: 'small'
                            },
                            style: {
                              marginRight: '5px'
                            },
                            on: {
                              click: () => {
                                this.handleRemove(params.index)
                              }
                            }
                          }, '删除'),
                          h('Button', {
                            props: {
                              type: 'info',
                              size: 'small'
                            },
                            on: {
                              click: () => {
                                this.handleModal(params.index)
                              }
                            }
                          }, '测试仓库')
                        ]);
                      }
                    }
                ],
                data: []
            }
        },
        methods: {
            handleModal (index,type) {
              debugger;
              let data = this.data[index];
                if (type==0) {
                    this.modalTitle = '编辑仓库'
                    this.formItem = Object.assign({}, this.formItem, data)
                   this.modalVisible = true
                }else {
                   this.uploadTitle ="上传文件测试"
                   this.formItem = Object.assign({}, this.formItem, data)
                   this.uploadVisible = true;
                }

            },
          addStore(){
            this.modalTitle = '添加仓库'
            this.modalVisible = true
          },
            handleReset () {
                const newData = {
                    id: '',
                    storeName: '',
                    storeEnName: '',
                    accessKey: '',
                    accessKeySecret: '',
                    appid: '',
                    bucketName: '',
                    domain: '',
                    storetype: '',
                    iscloud: '',
                    commcontent: '',
                    nowsize: '',
                    maxsize: '',
                    endpoint: '',
                    isdefault: '',
                }
                this.formItem = newData
                //重置验证
                let form  = this.refs['form']
                form.resetFields()
                        this.modalVisible = false
                        this.uploadVisible = false;
                this.saving = false
            },
            handleSubmit () {
                let form  = this.refs['form']
                form.validate((valid) => {
                    if (valid) {
                        this.saving = true
                        if (this.formItem.id) {
                        Set.update(this.formItem).then(res => {
                            if (res.code === 0) {
                                this.$Message.success('保存成功')
                                this.handleReset()
                             }
                            this.handleSearch()
                        }).finally(() => {this.saving = false})
                    } else {
                       Set.add(this.formItem).then(res => {
                            this.handleReset()
                            this.handleSearch()
                            if (res.code === 0) {
                                this.$Message.success('保存成功')
                            }
                          }).finally(() => {this.saving = false})
                        }
                   }
                })
            },
            handleSearch (page) {
                if (page) {
                    this.pageInfo.page = page
                }
                this.loading = true
                Set.list({page: this.pageInfo.page, limit: this.pageInfo.limit}).then(res => {
                    this.data = res.data.records
                    this.pageInfo.total = parseInt(res.data.total)
                }).finally(() => {this.loading = false})
            },
            handlePage (current) {
                this.pageInfo.page = current
                this.handleSearch()
            },
            handlePageSize (size) {
                this.pageInfo.limit = size
                this.handleSearch()
            },
            handleRemove (index) {
              let data = this.data[index];
               let modal = this.$Modal
               modal.confirm({
                    title: '确定删除吗？',
                    onOk: () => {
                        Set.remove(data.id).then(res => {
                            if (res.code === 0) {
                                this.pageInfo.page = 1;
                                this.$Message.success('删除成功');
                            }
                            this.handleSearch();
                        })
                    }
                })
            },
            handleClick (name, row) {
                switch (name) {
                    case 'remove':
                        this.handleRemove(row)
                        break
                }
            }
        },
        mounted: function () {
            this.handleSearch()
        }
    }
</script>
